<template>
  <div class="personal">
    <index-header></index-header>
    <div class="psheader container-fluid">
      <div class="topbg">
 <div class="top row no-gutter">
        <ul class="col-12 text-white font-weight-bold">
          <li class="offset-lg-3 col-lg-1 ">
            <span class="text-12 color-h">人气</span>
            <span class="">111111</span>
          </li>
          <li class="col-lg-1">
            <span class="text-12 color-h">积分</span>
            <span class="">111111</span>
          </li>
          <li class="col-lg-2">
            <img :src="avatar" class="rounded-circle" alt="" />
          </li>
          <li class="col-lg-1">
            <span class="text-12 color-h">粉丝</span>
            <span class="">111111</span>
          </li>
          <li class="col-lg-1">
            <span class="text-12 color-h">关注</span>
            <span class="">111111</span>
          </li>
        </ul>
      </div>
      </div>
     
      <div class="bom text-center pb-3">
        <p>壹食视觉美食摄影</p>
        <p class="text-12 color-h">深圳|摄影师</p>
        <ul class="breadcrumb text-12">
          <li class="breadcrumb-item col-lg-">美食摄影</li>
          <li class="breadcrumb-item">电影拍摄</li>
          <li class="breadcrumb-item">视频制作</li>
          <li class="breadcrumb-item">v:1919191919</li>
        </ul>
        <a
          class="btn btn-warning btn-sm mr-2 px-4"
          v-show="!gzstate"
          @click="gzstate = true"
          role="button"
          >关注</a
        >
        <a
          class="sendw btn btn-default btn-outline-secondary btn-sm px-4 text-dark mr-2"
          v-show="gzstate"
          @click="gzstate = false"
          role="button"
          >已关注</a
        >
        <a
          type="button"
          data-toggle="modal"
          data-target="#exampleModal"
          class="sendw btn btn-default btn-outline-secondary btn-sm px-4"
          >私信</a
        >
      </div>

      <!-- 导航栏 -->
      <div class="navi bg-white" :class="{ naviFixed: isfixed }">
        <ul class="nav justify-content-center">
          <li class="nav-item" @click="currindex = 0">
            <a
              class="nav-link color-h hovercolor"
              :class="{ activeA: currindex == 0 }"
              href="javascript:void(0);"
              >首页</a
            >
          </li>
          <li class="nav-item" @click="currindex = 1">
            <a
              class="nav-link color-h hovercolor"
              :class="{ activeA: currindex == 1 }"
              href="javascript:void(0);"
              >资料</a
            >
          </li>
          <li class="nav-item" @click="currindex = 2">
            <a
              class="nav-link color-h hovercolor"
              :class="{ activeA: currindex == 2 }"
              >收藏</a
            >
          </li>
        </ul>
      </div>
      <div class="content container-fluid">
        <!-- 1 -->
        <div class="thumblist row py-3" v-if="currindex == 0">
          <!-- <thumb
            :imgurl="item"
            :key="index"
            v-for="(item, index) in imgarr"
          ></thumb>  -->
        </div>
        <!-- 2 -->
        <div
          class="row text-12 justify-content-center"
          v-if="currindex == 1"
        >
          <div class="card border-0 my-3 col-lg-6 col-sm-8 px-0 py-3">
            <div class="card-body p-0">
              <div class="row">
                <div class="col-lg-2 col-sm-3 text-right">基本信息</div>
              </div>
              <div class="row">
                <div class="col-lg-2 col-sm-3 text-right color-h">基本信息</div>
                <div class="col-lg-10 col-sm-8">女</div>
              </div>
              <div class="row">
                <div class="col-lg-2 col-sm-3 text-right color-h">简介</div>
                <div class="col-lg-10 col-sm-8">美食保影/电商拍量/规霜制作</div>
              </div>
              <hr />
              <div class="row">
                <div class="col-lg-2 col-sm-3 text-right color-h">简介</div>
                <div class="col-lg-10 col-sm-8">美食保影/电商拍量/规霜制作</div>
              </div>
              <hr />
              <div class="row">
                <div class="col-lg-2 col-sm-3 text-right color-h">简介</div>
              </div>
              <div class="row">
                <div class="col-lg-10 col-sm-8 offset-lg-2 offset-sm-3">
                  <span class="text-12 tag btn btn-sm">Small button</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <nav aria-label="Page navigation example " v-if="currindex == 0">
          <ul class="pagination justify-content-md-center pb-3">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
        <!-- 3 -->
        <div class="thumblist row py-3" v-if="currindex == 2">
          <!-- <thumb
            :imgurl="item"
            :key="index"
            v-for="(item, index) in imgarr"
          ></thumb> -->
        </div>
        <!-- 4 -->
        <div
          class="row text-12 justify-content-lg-center"
          v-if="currindex == 3"
        >
          <div class="card border-0 my-3 col-lg-8 px-0 py-3">
            <div class="card-body p-0">
              <div class="row">
                <div class="offset-lg-4 col-lg-4 text-center py-4">
                  暂无收藏
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 私信弹框 -->
      <div
        class="modal fade"
        id="exampleModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog" style="max-width: 384px">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">写私信</h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <span class="text-12 tag btn btn-sm btn-block"
                  >Small button</span
                >
              </div>
              <div class="form-group position-relative">
                <textarea
                  rows="6"
                  class="form-control"
                  maxlength="100"
                  id="message-text"
                ></textarea>
                <span class="textlength text-12 color-h position-absolute"
                  >200</span
                >
              </div>
              <div class="form-group">
                <a
                  id="dropdownMenuButton"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  class="text-12"
                  ><svg
                    class="icon mr-2"
                    width="18px"
                    height="18.00px"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill="#f4ea2a"
                      d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m0 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448zM320 405.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0ZM704 405.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0ZM512 810.7c117.8 0 213.3-95.5 213.3-213.3H298.7c0 117.8 95.5 213.3 213.3 213.3z"
                    />
                  </svg>
                  添加表情</a
                >
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  12
                </div>
              </div>
            </div>
            <div class="modal-footer justify-content-lg-center">
              <a type="button" class="btn btn-warning btn-sm mr-2 px-4" href="#"
                >确定</a
              >
              <a
                type="button"
                data-toggle="modal"
                data-target="#exampleModal"
                data-whatever="@getbootstrap"
                class="sendw btn btn-default btn-outline-secondary btn-sm px-4"
                href="#"
                role="button"
                >取消</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import indexHeader from "@/components/indexCom/index-header.vue";
import thumb from "@/components/personalCom/thumb.vue";

export default {
  data() {
    return {
      isfixed: false,
      currindex: 1,
      // 关注按钮
      gzstate: true,
       avatar:localStorage.getItem("avatar"),
      // img
      imgarr: [
        "00b1c8597ec4fc00000021295382b9.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        "01a65e5f867e4311013f3110d587ad.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        "01ab655f87f49011013e4584a44a3d.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        "01ad345f85c25c11013f3110e8a9dc.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        "01df695cfabad6a801213ec2447586.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        "01f9225f893edd11013f31104db4f8.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        "04e1b45819f528a84a0e282bf9faab.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        "016d045f89670911013f3110562450.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        "0181b55f59cb7711013e3187541a5f.jpg@80w_80h_1c_1e_1o_100sh.jpg",
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", (e) => {
      document.documentElement.scrollTop > 436
        ? (this.isfixed = true)
        : (this.isfixed = false);
    });
  },
  components: {
    indexHeader,
    thumb,
  },
};
</script>

<style lang="less">
.psheader {
  padding: 60px 0px 0px 0px;
  box-sizing: border-box;
  > .topbg {
    background-image: url("~@/assets/personal/img/1.jpg");
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    >.top{
  background: linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(58, 54, 54, 0.502) 100%);

 
    height: 250px;
    padding-top: 194px;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
      }
      & > span:first-child {
        color: #bbbbbb;
      }
    }
    }
   
  }
  .bom {
    padding-top: 60px;
    ul {
      display: flex;
      justify-content: center;
    }
    .sendw .btn-outline-secondary.focus,
    .btn-outline-secondary:focus {
      box-shadow: none !important;
    }
    .sendw:hover {
      background-color: #fff !important;
    }
    .breadcrumb {
      background-color: rgba(#fff, 0);
    }
  }
  > .navi {
    z-index: 500;
    background-color: #fff;
    box-shadow: 0px 2px 2px #eeeeee;
    a {
      border-bottom: 2px solid #fff;
    }
  }
  > .content {
    background-color: #f4f4f4;
    > .thumblist {
      width: 80%;
      margin: auto;
    }
    a.page-link {
      color: #000;
      &:hover {
        background-color: #ffc107;
      }
    }
  }
  textarea {
    resize: none !important;
  }
  // 评论位置
  .textlength {
    bottom: 2px;
    right: 27px;
  }
}

.psheader {
  .form-control {
    box-shadow: none !important;
  }
  .modal-footer {
    border-top: 0px !important;
  }
  .tag {
    background-color: #eeeeee !important;
  }
  ul {
    display: flex;
    flex-direction: row;
  }
  .text-12 {
    font-size: 12px;
  }
  .bg-white {
    background-color: #fff;
  }
  .color-h {
    color: #bbbbbb;
  }
  .hovercolor:hover {
    color: #000;
    border-bottom: 2px solid #000;
  }
  .activeA {
    border-bottom: 2px solid #000 !important;
    color: #000;
  }
  .naviFixed {
    width: 100%;
    position: fixed;
    top: 60px;
    display: flex;
    justify-content: center;
  }
  .row {
    margin: 0px;
  }
}
@media (min-width: 576px){
.psheader .modal-dialog {
    margin: 0px auto;
}}
</style>